<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>软华签名</title>
</head>
<body>    
    <div>
        <!-- 存放Canvas容器 -->
        <div id="autograph"></div>
        <button id="clearBtn">重写</button>
        <button id="saveBtn">保存</button>
    </div>
    <div>保存的图片数据：<br>
        <img id="showAutoGraph" src="" />
    </div>
    <script>
        window.onload=function(){
            new lineCanvas({
                //canvas对象
                el:document.getElementById("autograph"),
                //清除签名区域
                clear_Btn:document.getElementById("clearBtn"),
                //保存签名数据
                save_Btn:document.getElementById("saveBtn"),
                //设置签名粗细
                lineWidth:10,
                //设置字体颜色
                color:"black",
                //设置签名板颜色
                background:"#eee",
                //签名区域宽
                width:500,
                //签名区域高
                height:300,
                callback:function(data){
                    //返回base64位图片数据，可存储到数据库
                    // console.log(data);
                    var show = document.getElementById("showAutoGraph").setAttribute("src",data);
                }
            })
        }



        function lineCanvas(obj){
            this.lineWidth = obj.lineWidth;
            this.color = obj.color;
            this.background = obj.background;
            this.el = obj.el;
            this.clearBtn = obj.clear_Btn;
            this.saveBtn = obj.save_Btn;
            this.type = obj.type;
            this.callback = obj.callback;
            this.canvas = document.createElement("canvas");
            this.el.appendChild(this.canvas);
            this.ctx = this.canvas.getContext("2d");
            this.canvas.width = obj.width;
            this.canvas.height = obj.height;
            this.ctx.fillStyle = this.background;
            this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
            this.ctx.strokeStyle = this.color;
            this.ctx.lineWidth = this.lineWidth;
            this.ctx.lineCap = "round";

            //监听鼠标操作
            var mouseStatic=false;
            //开始绘制
            this.canvas.addEventListener("mousedown", function(ev) {
                this.ctx.beginPath();
                this.ctx.moveTo(ev.clientX-this.canvas.offsetLeft,ev.clientY-this.canvas.offsetTop);
                mouseStatic=true;
            }.bind(this), false);
            //绘制中
            this.canvas.addEventListener("mousemove", function(ev) {
                if(mouseStatic){
                    this.ctx.lineTo(ev.clientX-this.canvas.offsetLeft,ev.clientY-this.canvas.offsetTop);
                    this.ctx.stroke();
                }
            }.bind(this), false);
            // //结束绘制
            this.canvas.addEventListener("mouseup", function() {
                this.ctx.closePath();
                mouseStatic = false;
            }.bind(this), false);
            //监听触摸屏操作
            //开始绘制
            this.canvas.addEventListener("touchstart", function(e) {
                this.ctx.beginPath();
                this.ctx.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
            }.bind(this), false);
            //绘制中
            this.canvas.addEventListener("touchmove", function(e) {
                this.ctx.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
                this.ctx.stroke();
            }.bind(this), false);
            //结束绘制
            this.canvas.addEventListener("touchend", function() {
                this.ctx.closePath();
            }.bind(this), false);
            //清除画布
            this.clearBtn.addEventListener("click", function() {
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.ctx.fillStyle = this.background;
                this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
            }.bind(this), false);
            //保存图片，直接转base64
            this.saveBtn.addEventListener("click", function() {
                var imgBase64 = this.canvas.toDataURL();
                return this.callback(imgBase64);
            }.bind(this), false);
        }
     </script>
</body>
</html>